<!--
 * @Description: 修改发票信息弹窗
 * @Author: Li Yujie
 * @Date: 2021/03/08
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/03/08
-->
<template>
    <div class="wrapper">
        <el-dialog
            :title="type === 'edit' ? '修改发票信息' : '查看发票信息' "
            :visible.sync="dialogVisible"
            width="680px"
            :close-on-click-modal="false"
        >
            <div class="info-dialog-wrapper">
                <el-form
                    label-width="84px"
                    label-position="right"
                >
                    <template v-if="detailInfo.title_type === 2">
                        <el-form-item
                            label="姓名："
                        >
                            {{ detailInfo.title }}
                        </el-form-item>
                    </template>
                    <template v-if="detailInfo.title_type === 1">
                        <el-form-item
                            label="公司名称："
                        >
                            {{ detailInfo.title }}
                        </el-form-item>
                        <el-form-item
                            label="公司税号："
                        >
                            {{ detailInfo.tax_reg_cert_number }}
                        </el-form-item>
                        <template v-if="detailInfo.type === 2">
                            <el-form-item
                                label="公司地址："
                            >
                                {{ detailInfo.company_address }}
                            </el-form-item>
                            <el-form-item
                                label="公司电话："
                            >
                                {{ detailInfo.company_tel }}
                            </el-form-item>
                            <el-form-item
                                label="开户银行："
                            >
                                {{ detailInfo.bank_name }}
                            </el-form-item>
                            <el-form-item
                                label="开户账号："
                            >
                                {{ detailInfo.bank_account }}
                            </el-form-item>
                        </template>
                        <el-form-item
                            label="备注："
                        >
                            {{ detailInfo.remark ? detailInfo.remark : '--' }}
                        </el-form-item>
                    </template>
                    <div style="padding-top: 20px;margin-top: 20px; border-top: 1px solid #ccc">
                        <el-form-item
                            label="电子邮箱："
                            v-if="detailInfo.type === 1"
                        >
                            {{ detailInfo.receive_email ? detailInfo.receive_email : '--' }}
                        </el-form-item>
                        <el-form-item
                            label="手机号码："
                        >
                            {{ detailInfo.receive_address ? detailInfo.receive_address.phone : '--' }}
                        </el-form-item>
                        <el-form-item
                            label="收货地址："
                            v-if="detailInfo.type === 2"
                        >
                            <div v-if="detailInfo.receive_address">
                                {{ detailInfo.receive_address.province_name }}
                                {{ detailInfo.receive_address.city_name }}
                                {{ detailInfo.receive_address.county_name }}
                                {{ detailInfo.receive_address.detail_info }}
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="收件人："
                            v-if="detailInfo.type === 2"
                        >
                            {{ detailInfo.receive_address ? detailInfo.receive_address.user_name : '--' }}
                        </el-form-item>
                    </div>
                </el-form>
                <el-button
                    size="middle"
                    class="close-btn"
                    @click="infoDialog = false"
                >
                    关闭
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'FinanceCheck',
    data() {
        return {
            dialogVisible: false,
            loading: false,
            filterData: {
                hire_no: '',
                status: '99',
                type: 99,
                create_start_time: '',
                create_end_time: '',
                invoice_create_start_time: '',
                invoice_create_end_time: '',
            },
            tableData: [],
            detailInfo: {},
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            typeList: [
                {label: '全部', value: 99},
                {label: '分佣', value: 1},
                {label: '手续费', value: 2},
            ],
            applyTimeRange: [],
            createTimeRange: [],
        };
    },
    watch: {
        createTimeRange(value) {
            this.filterData.create_start_time = value ? value[0] / 1000 : '';
            this.filterData.create_end_time = value ? value[1] / 1000 : '';
            this.getTableData(1);
        },
        applyTimeRange(value) {
            this.filterData.invoice_create_start_time = value ? value[0] / 1000 : '';
            this.filterData.invoice_create_end_time = value ? value[1] / 1000 : '';
            this.getTableData(1);
        },
    },
    mounted() {
    },
    methods: {
        show(hire_no) {
            this.filterData.hire_no = hire_no;
            this.dialogVisible = true;
            this.loading = true;
            this.getDetailInfo();
            this.getTableData();
        },

        /**
         * @description 获取数据
         */
        getDetailInfo() {
            let params = {
                hire_no: this.filterData.hire_no
            };

            this.$post('/student/hire_invoice%5Cget_info', params, resp => {
                if (resp.code === 1) {
                    this.detailInfo = resp.data;
                }
                this.loading = false;
            });
        },

        /**
         * @description 获取列表数据
         * @param page
         */
        getTableData(page) {

            let params = {...this.filterData};

            params.status = Number(params.status);
            params.page_id = page || this.page.now_page;

            this.$post('/student/hire_invoice%5Cget_bill_list', params, resp => {
                if (resp.code === 1) {
                    this.tableData = resp.data.list;
                    this.page = resp.data.page;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
                this.loading = false;
            });
        },
        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {

    .info-dialog-wrapper {
        padding: 3px 22px;
        /deep/ .el-form-item {
            margin-bottom: 0;
        }
        /deep/ .el-form-item__content {
            line-height: 30px;
            margin-top: 6px;
        }
        .close-btn {
            width: 120px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 50%;
            transform: translateX(-50%);
            margin-top: 24px;
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-dialog__body {
        padding: 24px;
    }

}
</style>
